<script setup lang="ts">
import type { resEnterpriseList, TableItem } from "@/pages/enterpriseManager/firmManager/apis/type.ts"
import { onMounted, reactive, ref } from "vue"
import Add from "./Add.vue"
import { getEnterpriseListAPI } from "./apis/index.ts"

const tableData = ref<TableItem[]>([])
const showAddForm = ref(false)
const router = useRouter()
function handleOpenAddForm() {
  showAddForm.value = true
}

function handleCloseAddForm() {
  showAddForm.value = false
}

const searchForm = reactive({
  name: "",
  page: 1,
  pageSize: 10,
  total: 0
})

async function getTableData() {
  const res = (await getEnterpriseListAPI(searchForm)) as resEnterpriseList
  tableData.value = res.data.rows
  searchForm.total = res.data.total
}
const editId = ref<number | undefined>(undefined)

function editRent(id?: number) {
  editId.value = id
  showAddForm.value = true
}
onMounted(() => {
  getTableData()
})
</script>

<template>
  <Add v-if="showAddForm" :edit-id="editId" @close="handleCloseAddForm" />
  <div v-else class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">
        企业名称：
      </div>
      <el-input clearable placeholder="请输入内容" class="search-main" v-model="searchForm.name" />
      <el-button type="primary" @click="getTableData">
        查询
      </el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="handleOpenAddForm">
        添加企业
      </el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table" style="width: 100%;">
      <el-table style="width: 100%" :data="tableData">
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column
          label="联系电话"
          prop="contactNumber"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="text">
              添加合同
            </el-button>
            <el-button size="small" type="text" @click="router.push(`/enterpriseManager/detailEnterprise/${scope.row.id}`)">
              查看
            </el-button>
            <el-button size="small" type="text" @click="editRent(scope.row.id)">
              编辑
            </el-button>
            <el-button size="small" type="text">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        v-model:current-page="searchForm.page"
        v-model:page-size="searchForm.pageSize"
        :total="searchForm.total"
        layout="total, prev, pager, next"
        @current-change="getTableData"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
</style>
